<template>
  <img :src="backPic" mode="widthFix" class="head-img" @load="headImgLoad"/>
<!--	<view :class="voteList.length>1?'box':'boxH box'" :style="'background-image: url('+backPic+');padding-top:'+statusBarHeight+'px;background-attachment: fixed;background-size: 100% 100%;background-repeat: no-repeat;'">-->

  <view class="nav" :style="'height: '+navBarHeight+'px; top:' + statusBarHeight + 'px;'">
    <view class="back" :style="'height: '+navBarHeight+'px;width:'+navBarHeight+'px;'" @click="onClick">
      <image class="img" src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/back.png" mode="aspectFill"></image>
    </view>
    <view class="name" :style="'line-height: '+navBarHeight+'px;'"><!--投票活动--></view>
    <view :style="'height: '+navBarHeight+'px;width:'+navBarHeight+'px;'"></view>
  </view>

  <view :class="voteList.length>1?'box':'boxH box'">

<!--		<view class="head" :style="'margin-top: '+navBarHeight+'px;'">
			<view class="info">
				&lt;!&ndash; <view class="title">{{activityData.activityName}}</view>
				<view class="t">活动时间:{{activityData.activityStartTime}}至{{activityData.activityEndTime}}</view>
				<view class="t">活动人数:{{activityData.activityPeople}}人</view>
				<view class="t">活动地址:{{activityData.activityAddr}}</view> &ndash;&gt;
			</view>
		</view>-->
		<view class="main" :style="'margin-top:' + marginTopHeight + 'px;'">

			<view class="list">
				<view class="search">
					<view class="box">
						<view class="l">
							<input class="inp" type="number" v-model="searchKey" confirm-type="search" @input="doSearch" @confirm="doSearch" placeholder="请输入内容" />
						</view>
						<view class="r">
							<!-- https://honor-hall.oss-cn-chengdu.aliyuncs.com/gb.png -->
							<image @click="doClear" v-if="showClear" style="width: 40rpx;height: 40rpx;" src="../../../static/image/off.png" mode="widthFix"></image>
							<image v-else src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/search.png" mode="widthFix"></image>
						</view>
            <view class="rule" @click="onClickActivityRule">活动规则</view>
					</view>
				</view>
				<view class="item" v-for="(item,index) in voteList" :key="item.id">
					<view class="user">
						<view class="l">
							<view class="avatar">
								<image :src="item.userImgUrl" mode="aspectFill"></image>
							</view>
							<view class="name">
								<view class="n1">{{item.nickName}}</view>
								<view class="n2">{{item.no}}号</view>
							</view>
						</view>
						<view class="r" v-if="activityData.id !== '1972139920180875265'">
							<view class="num"><text v-if="item.ranking !== null">第{{item.ranking}}名</text> {{item.voteNumber}}票</view>
							<view :class="item.userVoteStatus<1?'dis':''" class="btn" @click="handleVote(item)">投票</view>
						</view>
					</view>
					<view class="con">
						{{item.saying}}
					</view>
					<view class="media">
						<image class="o" :src="item.imgUrl" mode="aspectFill" @click="handleView(item)"></image>
					</view>
				</view>
			</view>
			<!-- <view v-else class="list">
				<view class="nodata">
					<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/nodata.png" mode="aspectFill"></image>
					<view class="txt">暂无数据</view>
				</view>

			</view> -->
		</view>
		<!-- <view class="blank"></view> -->
		<view class="foot">
			<view class="box">
				<view v-if="activityData.userInitiateVotingStatus<1" class="btn_r" @click="handleClick">
					点击上传
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,getCurrentInstance } from 'vue';
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px, wxSetUpShareFunction } from "../../../utils/utils";
import { onReachBottom, onShow } from '@dcloudio/uni-app';
import { getActivityDetailApi, getUserVoteListApi,vote4Others } from '../../../api/activity';

const { proxy } = getCurrentInstance()
const backPic = ref('')
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
const marginTopHeight = ref(0)
// 胶囊位置信息
const rect = uni.getMenuButtonBoundingClientRect();
// 导航栏高度
const navBarHeight = (rect.top - statusBarHeight) * 2 + rect.height;
const onClick = () => {
	uni.navigateBack()
}
const today = new Date()
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const hours = ('0' + today.getHours()).slice(-2);
const minutes = ('0' + today.getMinutes()).slice(-2);
const seconds = ('0' + today.getSeconds()).slice(-2);
// const dateStr = `${year}-${month}-${day}`
const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

onShow(()=>{
	/* #ifdef MP-WEIXIN */
	activityId.value = getUrlParamsInWeixin()?.id;
	wxSetUpShareFunction();
	/* #endif */
	/* #ifdef H5 */
	activityId.value = getUrlParamsInH5()?.id;
	/* #endif */
	getActivityData()
	queryVote.value.activityId = activityId.value
	if (refresh.value) {
		voteList.value = []
		queryVote.value.page = 1
		getVoteData()
	}

})
onReachBottom(()=>{
	if (queryVote.value.page * queryVote.value.limit < total.value) {
		queryVote.value.page += 1
		getVoteData()
	}
})
// import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
// const { proxy } = getCurrentInstance();
const refresh = ref(true)
const searchKey = ref('')
const showClear = ref(false)
const activityId = ref('')
const activityData = ref({})
const voteList = ref([])
const total = ref(0)
const queryVote = ref({
	activityId:'',
	limit:10,
	page:1,
	no:''
})

const handleView = (row) => {
	refresh.value = false
	uni.previewImage({
		urls: [row.imgUrl],
		showmenu:true
	});
}

const doClear = () => {
	searchKey.value = ''
	showClear.value = false
	queryVote.value.no = ''
	queryVote.value.page = 1
	voteList.value = []
	console.log('---------search---------',searchKey.value,queryVote.value)
	getVoteData()
}

const doSearch = async (e) => {
	console.log('---------search---------',e.detail,searchKey.value)
	showClear.value = e.detail.value.length>0 ? true:false
	queryVote.value.no = e.detail.value
	queryVote.value.page = 1
	voteList.value = []
	getVoteData()
}

const handleVote = async (item) => {
	console.log(item)
	if (activityData.value.activityEndTime<timeStr) {
		uni.showToast({
			icon:'none',title:'投票已结束无法投票'
		})
		return false
	}
	if (item.userVoteStatus>0) {
		const {msg} = await vote4Others({activityId:activityId.value, voteInfoId:item.id})
		uni.showToast({
			icon:'none',
			title: '投票成功'
		})
		// item.voteNumber += 1
		// voteList.value = []
		// queryVote.value.page = 1
    afreshGetVoteData()
	} else {
		uni.showToast({
			icon:'none',title:'超出投票上限'
		})
	}

}

const getVoteData = async () => {
	const {code, data} = await getUserVoteListApi(queryVote.value)
	if (code === 200) {
		voteList.value = [...voteList.value, ...data.records];
		total.value = data.total
	}
}
const afreshGetVoteData = async () => {
  const {code, data} = await getUserVoteListApi({
    activityId: queryVote.value.activityId,
    limit: queryVote.value.page * queryVote.value.limit,
    page: 1,
    no: queryVote.value.no
  })
  if (code === 200) {
    voteList.value = data.records;
    total.value = data.total
  }
}

const getActivityData = async () => {
  const that = this
	const { code, data } = await getActivityDetailApi(activityId.value);
	if (code === 200) {
	  data.residueDay = !!data.residueDay ? Number(data.residueDay) : 0;
	  activityData.value = { ...data };
	  backPic.value = data.backgroundImgUrl
	}
}

//获取头部图片的高度，用来添加margin-top
const headImgLoad = () => {
  const query = uni.createSelectorQuery().in(proxy);
  query.select('.head-img').boundingClientRect(headImg => {
    console.log(headImg.height)
    marginTopHeight.value = headImg.height
  }).exec()
}

const handleClick = () => {
	if (activityData.value.activityEndTime<timeStr) {
		uni.showToast({
			icon:'none',title:'投票已结束无法投票'
		})
	} else {
		if (activityData.value.userInitiateVotingStatus<1) {
			refresh.value = true
			uni.navigateTo({
				url:`./activity-sign?vote=1&id=${activityId.value}`
			})
		} else {
			uni.showToast({
				icon:'none',title:'已经发起过投票了'
			})
		}
	}

}

const onClickActivityRule = () => {
  console.log(activityId.value)
  uni.redirectTo({
    url:`./activity-user-info?isVote=1&isVoteBack=1&id=${activityId.value}`
  })
}

</script>

<style lang="less" scoped>
.boxH{
	height: 100vh;
}

.head-img {
  width: 100vw;
  z-index: 998;
  position: fixed;
  top: 0;
  left: 0;
}

.nav{
  width: 100vw;
  position: fixed;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  .back{
    image{
      color: #fff;
      width: 100%;
      height: 100%;
    }
  }
  .name{
    color: #ffffff;text-align: center;
  }
}

.box{
	width: 100vw;
	// min-height: 100vh;

	.head{
		width: 100vw;
		height: 200rpx;
		padding: 10rpx 30rpx;
		.info{
			width: 690rpx;
			display: flex;
			flex-direction: column;
			.title{
				margin-top: 20rpx;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: bold;
			}
			.t{
				margin-top: 20rpx;
				color: #ffffff;
				font-size: 23rpx;
			}
		}
	}
	.main{
    background-color: #F1F1F1;
		width: 100vw;
		//margin-top: 300rpx;
		padding: 0 30rpx;
		margin-bottom: 60rpx;
		.list{
			background: #ffffff;
			width: 690rpx;
			border-radius: 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			.search{
				.box{
					width: 630rpx;
					height: 60rpx;
					display: flex;
					border-radius: 30rpx;
					position: relative;
					// box-shadow:2rpx 2rpx 10rpx #000;
					.l{
            border-radius: 12rpx;
						padding-left: 20rpx;
						height: 60rpx;
						line-height: 60rpx;
            background-color: #F1F1F1;
						.inp{
							height: 60rpx;
							width: 470rpx;
							line-height: 60rpx;
							font-size: 28rpx;
						}
					}
					.r{
						position: absolute;
						top: 10rpx;
						//right: 20rpx;
            left: 440rpx;
						width: 30rpx;
						height: 30rpx;
						image{
							width: 100%;height: 100%;
						}
					}

          .rule {
            height: 40rpx;
            border-radius: 20rpx;
            font-size: 26rpx;
            line-height: 40rpx;
            text-align: center;
            background-color: #eff1f5;
            position: absolute;
            right: 0;
            padding: 10rpx;
          }
				}
			}
			.item{
				width: 650rpx;
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F4F4F4;
				.user{
					display: flex;
					justify-content: space-between;
					.l{
						height: 100rpx;
						display: flex;
						align-items: center;
						.avatar{
							width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 50%;
							image{
								width: 100%;height: 100%;border-radius: 50%;
							}
						}
						.name{
							font-size: 32rpx;
						}
					}
					.r{
						height: 100rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						.num{
							margin-right: 20rpx;
							font-size: 28rpx;
							color: #969696;
						}
						.btn{
							width: 	120rpx;
							height: 40rpx;
							border-radius: 20rpx;
							font-size: 26rpx;
							line-height: 40rpx;
							text-align: center;
							background-color: #EFF1F5;
							&.dis{
								color: #969696;
							}
						}
					}
				}
				.con{
					margin-top: 30rpx;
					font-size: 28rpx;
					padding: 0 10rpx;
				}
				.media{
					margin-top: 30rpx;
					.o{
						width: 300rpx;
						height: 200rpx;
            border-radius: 10rpx;
					}
				}

			}
			.nodata{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 200rpx;height: 200rpx;
				}
				.txt{
					color: #EFF1F5;
				}
			}
		}
	}
	.foot{
		// position: fixed;
		// z-index: 1;
		// bottom: -48vh;
		width: 100vw;
		padding-bottom: 20rpx;
		.box{
			width: 100vw;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: fixed;
			bottom: 0;
			.btn_r{
				width: 630rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				border-radius: 50rpx;
				background: linear-gradient(to right,#01E4BF,#0080DB);
			}
		}
	}
}
</style>
